vue(2.x) 响应式修改数据(对象、数组) |
您所在的位置:网站首页 › objectassign() 数组 › vue(2.x) 响应式修改数据(对象、数组) |
编写时间:2019-08-18 更新时间:2019-08-20 作者:鬼小妞 备注: 本文转载了vue(2.x) 响应式修改数据(对象、数组)及难点(坑),仅供参考 状态:已完成、待补充2019-08-20 建议先看一下响应式原理关于VUE响应式数据的最佳解释 背景 Vue不能检测对象属性的添加、删除(仅此而已,可直接对该对象重新赋值、修改该对象或内层对象的属性) Vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使用filter、map、concat、slice等方式生成新数组对其赋值) 对象1. $set、set、$delete、delete // $set是Vue.set的别名 this.$set(this.obj, k, v) Vue.set(this.obj, k, v) this.$delete(this.obj, k) Vue.delete(this.obj, k) 复制代码2. Object.assign() 有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新属性不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。 // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 复制代码数组1. $set、set、$delete、delete 与对象的第一种方式用法相同,只是将 对象 换成 数组,将 键(k) 换成 下标(index) 2. 使用数组的操作函数(其实已被Vue进行了修改) splice(), push(), pop(), shift(), unshift(), sort(), reverse() 3. Array拷贝 Array.from()等 难点(坑):1. 不能向vue实例或vue组件(this、this.$data)添加未定义的属性 2. 对于对象、数组进行set时,value可以为复杂的数据结构,vue会进行递归从而将其都转为reactive的数据,举例如下: this.$set(this.texts, 0, [ [1,2], [3,4], {name: 'XiaoMing'} ]) 复制代码3. v-model绑定的数据需要为 LHS,而不能为 RHS(item及&&、||、=、(,)、双目等运算符返回LHS),举例如下: // texts: [1,2,3] 复制代码// 错误, item为RHS 复制代码// 错误 复制代码// 错误 复制代码正确 复制代码正确 复制代码4. computed必须绑定一个data中的数据(或对象的属性、数组的项),否则无法响应式更新,尤其注意绑定初始不存在的数据时,举例如下: computed: { // 错误 prop () { if(!this.obj.data) return {} return this.obj.data } // 正确,使用Vue.set或Object.assign亦可 prop () { if(!this.obj.data) this.$set(this.obj, data, {}}) return this.obj.data } // 错误 prop () { if(!this.obj.arr) return [] return this.obj.arr } // 正确 prop () { if(!this.obj.arr) this.$set(this.obj, arr, []}) return this.obj.arr } } 复制代码参考: vue(2.x) 响应式修改数据(对象、数组)及难点(坑) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |